<template>
  <div class="myOrder">
    <!-- 搜索框 -->
    <div class="search">
      <van-cell-group inset>
        <van-icon name="arrow-left" class="backIco" size="6vw" @click="back" />
        <van-field
          center
          left-icon="search"
          clearable
          placeholder="搜索订单"
        >
          <template #button>
            <van-button size="small" style="{color: #000;}">搜索</van-button>
          </template>
        </van-field>
        <van-icon name="weapp-nav" />
      </van-cell-group>
    </div>
    <main>
      <van-tabs v-model:active="activeName" @change="clickTab" sticky>
        <van-tab :title="tab.name" :name="tab.value" v-for="tab in tanNames" :key="tab.value">
          <!-- 右上角标题 -->
          <template v-if="orderList.length==0" >
            <van-empty description="您还没有相关信息" />
          </template>
          <!-- 商品 -->
          <div class="shop" v-for="item in orderList" :key="item.id">
          <!-- 商品信息 -->
          <h3>{{statusMap(item.status)}}</h3>
          <!-- 商品卡片 -->
          <van-swipe-cell>
            <van-card
              :num="item.num"
              :price="item.price*item.num"
              :desc="item.desc"
              :title="item.goods_name"
              :thumb="item.s_goods_photos[0].path"
            >
              <template #tags>
                <van-tag plain type="warning">假一赔四</van-tag>
                <van-tag plain type="warning">极速退款</van-tag>
                <van-tag plain type="warning">七天无理由退换</van-tag>
              </template>
            </van-card>
          </van-swipe-cell>
          <!-- 按钮 -->
          <div class="btn">
            <template v-if="item.status==='1'">
              <van-button type="default" round size="small" @click="updateOrder(item)">取消订单</van-button>
              <van-button type="default" round size="small" @click="toPay(item)">去支付</van-button>
            </template>
            <template v-if="item.status!=='2'&&item.status!=='1'">
              <van-button type="default" round size="small" @click="delOrder(item)">删除订单</van-button>
            </template>
            <template v-if="item.status==='2'">
              <van-button type="default" round size="small" @click="refundOrder(item)">申请退款</van-button>
            </template>
            <template v-if="item.status==='3'">
              <van-button type="default" round size="small" @click="salesReturn(item)">申请退货</van-button>
              <van-button type="default" round size="small" @click="confirmShop(item)">确认收货</van-button>
            </template>
          </div>
          </div>
        </van-tab>
        <template v-if="orderList?.length">
          <h3 style="text-align: center;">已经到底了！</h3>
        </template>
        <van-back-top />
      </van-tabs>
    </main>
    <!-- 支付页面 -->
    <van-action-sheet v-model:show="show" title=" ">
      <div class="content">
        <div class="title">订单需支付金额</div>
        <div class="moeny"><span>￥</span>{{ orderMoney }}</div>
        <van-cell-group>
          <van-cell
            title="账号"
            :value="user.replace(/^(\d{3})\d{4}(\d{4})/, '$1****$2')"
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="付款方式" value="微信支付" />
        </van-cell-group>
        <van-button type="primary" @click="payBtn" block>确认付款</van-button>
      </div>
    </van-action-sheet>
    <!-- 轻提示 -->
    <van-toast v-model:show="showToast" style="padding: 0">
      <template #message>
        <h3 style="margin: 2.6667vw;">{{showTitle}}</h3>
      </template>
    </van-toast>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getOrdersApi,payOrderApi,updateOrderApi,delOrderApi } from '@/server';
import { useRouter } from 'vue-router';
const router=useRouter()
// 账户名
const user=ref()
const userInfo=ref([])
userInfo.value=JSON.parse(localStorage.getItem('userInfo'))
user.value=userInfo.value.phone
// 标签名称
const tanNames=ref([
  {
    name:"全部",
    value:'0'
  },
  {
    name:'待付款',
    value:'1'
  },
  {
    name:'待发货',
    value:'2'
  },
  {
    name:'待收货',
    value:'3'
  },
  {
    name:'待评价',
    value:'4'
  }
])
// 全部订单(渲染)
const orderList=ref([])
// 返回上一级
const back=()=>{
  router.back()
}
// 默认标签
const activeName = ref(0);
// 订单列表
const getOrderList=async ()=>{
  orderList.value=[]
  let res=await getOrdersApi({limit:999})
  if(res.status===200){
    let list=res.data.result.rows
    // 过滤
    if(activeName.value==='0'){
      list=res.data.result.rows
    }else if(activeName.value==='4'){
      list=list.filter(ele=>ele.status==='6')
    }else{
      list=list.filter(ele=>ele.status===activeName.value.toString())
    }
    list.forEach(ele=>{
      let data=JSON.parse(ele.goods_info)
      data.forEach(item=>{
        item.status=ele.status
        item.order_id=ele.id
        item.addr_id=ele.addr_id
        orderList.value.push(item)
      })
    })
  }
}
getOrderList()
// 状态映射
const statusMap=(status)=>{
  if(status==='0'||status==='7'){
    return '交易关闭'
  }else if(status==='1'){
    return '等待买家付款'
  }else if(status==='2'){
    return '等待卖家发货'
  }else if(status==='3'){
    return '待收货'
  }else if(status==='6'){
    return '待评价'
  }
}
// 标签点击事件
const clickTab=async ()=>{
  getOrderList()
}
// 弹窗
const showToast=ref(false)
// 弹窗标题
const showTitle=ref()
// 取消订单
const updateOrder=async (item)=>{
  let res=await updateOrderApi(item.order_id,{status:'7',addr_id:item.addr_id})
  if(res.status===200){
    showToast.value=true
    showTitle.value='取消订单成功！'
    getOrderList()
  }
}
// 是否展示支付
const show=ref(false)
// 支付金额
const orderMoney=ref()
// 要支付的商品
const orderShop=ref()
// 去支付
const toPay=async (item)=>{
  orderMoney.value=item.price*item.num
  orderShop.value=item
  show.value=true
}
// 支付
const payBtn=async ()=>{
  let res=await payOrderApi({id:orderShop.value.order_id})
  if(res.status===200){
    show.value=false
    // 更新
    await updateOrderApi(orderShop.value.order_id,{status:'2',addr_id:orderShop.value.addr_id})
    getOrderList()
    showToast.value=true
    showTitle.value='支付成功！'
  }
}
// 删除订单
const delOrder=async (item)=>{
  let res=await delOrderApi(item.order_id)
  if(res.status===200){
    showToast.value=true
    showTitle.value='删除订单成功!'
    getOrderList()
  }
}
// 申请退款
const refundOrder=async (item)=>{
  let res=await updateOrderApi(item.order_id,{status:'5',addr_id:item.addr_id})
  if(res.status===200){
    showToast.value=true
    showTitle.value='申请退款成功！'
    getOrderList()
  }
}
// 申请退货
const salesReturn=async (item)=>{
  let res=await updateOrderApi(item.order_id,{status:'4',addr_id:item.addr_id})
  if(res.status===200){
    showToast.value=true
    showTitle.value='申请退货成功！'
    getOrderList()
  }
}
// 确认收货
const confirmShop=async (item)=>{
  let res=await updateOrderApi(item.order_id,{status:'6',addr_id:item.addr_id})
  if(res.status===200){
    showToast.value=true
    showTitle.value='确认收货成功！'
    getOrderList()
  }
}
</script>

<style lang='scss' scoped>
.myOrder{
  width: 100vw;
  box-sizing: border-box;
  width: 100vw;
  background-color: gainsboro;
  .search{
    margin-top: 2.6667vw;
    height: 13.3333vw;
    border-bottom: 1px solid #f4f4f8;
    background-color: #fff;
    .van-cell-group{
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 0;
      .backIco{
        margin-right: 2vw;
      }
      .van-cell{
        width: 80vw;
        background-color: #f4f4f8;
        padding: 1vw 1vw 1vw 2vw;
        .van-button{
          background-color: #f4f4f8;
          border: none;
        }
      }
    }
  }
  main{
    background-color: gainsboro;
    min-height: 91vh;
    // padding-bottom: 5.3333vw;
    .shop{
      // padding-top: 5.3333vw;
      margin: 2.6667vw auto;
      width: 97vw;
      height: 46vw;
      border-radius: 2.6667vw;
      box-sizing: border-box;
      background-color: white;
      h3{
        margin-right: 3vw;
        height: 5.3333vw;
        line-height: 5.3333vw;
        text-align: right;
        font-size: 3.4667vw;
        color: #ff8917;
      }
      .van-checkbox{
        margin-left: 2.6667vw;
      }
      .delete-button {
        height: 100%;
      }
      .btn{
        margin-top: 2vw;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .content {
  padding: 8vw 4.2667vw 0;
  height: 80vh;
  .title {
    text-align: center;
    height: 5.3333vw;
    line-height: 5.3333vw;
    margin-bottom: 2.6667vw;
  }
  .moeny {
    height: 10.6667vw;
    text-align: center;
    line-height: 10.6667vw;
    font-size: 10vw;
    margin-bottom: 2.6667vw;
    span {
      font-size: 5vw;
      font-weight: bold;
    }
  }
  .van-button {
    border-radius: 2.6667vw;
  }
}
}
</style>
